<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="上传证件" prop="LicensePhoto">
        <el-upload
          :disabled="flag"
          :file-list="form.LicensePhoto"
          :multiple="true"
          class="avatar-uploader"
          action="https://api.sanjianke.com/common/Upload/upload?file=OrderAttach&type=image"
          list-type="picture-card"
          accept="image/png, image/jpeg"
          :on-preview="handlePictureCardPreview"
          :before-remove="false"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="公司全称" prop="CompanyAllName">
        <el-input v-model="form.CompanyAllName" disabled />
      </el-form-item>
      <el-form-item label="税号" prop="LicenseCode">
        <el-input v-model="form.LicenseCode" :disabled="flag" />
      </el-form-item>
      <el-form-item label="地址" prop="LicenseAddress">
        <el-input v-model="form.LicenseAddress" :disabled="flag" />
      </el-form-item>
      <el-form-item label="电话" prop="LicenseMobile">
        <el-input v-model="form.LicenseMobile" :disabled="flag" />
      </el-form-item>
      <el-form-item label="开户银行" prop="LicenseDepositBank">
        <el-input v-model="form.LicenseDepositBank" :disabled="flag" />
      </el-form-item>
      <el-form-item label="银行账号" prop="LicenseBankAccount">
        <el-input v-model="form.LicenseBankAccount" :disabled="flag" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
  <el-image-viewer
    v-if="dialogVisible"
    :url-list="[dialogImageUrl]"
    @close="closeViewer"
  />
  <!-- <el-dialog v-model="dialogVisible" width="auto">
    <img :src="dialogImageUrl" style="width:auto" />
  </el-dialog> -->
</template>

<script>
  import { EditLicenses } from '@/api/businessOrderCreate'

  export default defineComponent({
    name: 'License',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        flag: false,
        formRef: null,
        form: {},
        rules: {
          LicensePhoto: [
            { required: true, trigger: 'blur', message: '请上传公司证件照' },
          ],
          // CustomerAllName: [
          //   { required: true, trigger: 'blur', message: '请输入公司全称' },
          // ],
          // LicenseCode: [
          //   { required: true, trigger: 'blur', message: '请输入税号' },
          // ],
          // LicenseAddress: [
          //   { required: true, trigger: 'blur', message: '请输入地址' },
          // ],
          // LicenseMobile: [
          //   { required: true, trigger: 'blur', message: '请输入电话' },
          // ],
          // LicenseDepositBank: [
          //   { required: true, trigger: 'blur', message: '请输入开户银行' },
          // ],
          // LicenseBankAccount: [
          //   { required: true, trigger: 'blur', message: '请输入银行账号' },
          // ],
        },
        title: '',
        dialogFormVisible: false,
        dialogVisible: false,
        dialogImageUrl: '',
      })
      const handleRemove = (uploadFile, uploadFiles) => {
        console.log(uploadFile, uploadFiles)
        console.log(state.form, '12312312')
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.form.LicensePhoto.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log(state.form.LicensePhoto, '  state.LicensePhoto')
      }

      const closeViewer = () => {
        state.dialogImageUrl = ''
        state.dialogVisible = false
      }

      const handlePictureCardPreview = (uploadFile) => {
        console.log(uploadFile, 'uploadFile')
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      const showEdit = (row) => {
        if (!row) {
          state.title = '上传执照'
        } else {
          state.title = '上传执照'
          state.form = Object.assign({}, row)
          // console.log(row, 'state.form123')
          if (state.form.OrderFlowState >= 4) {
            state.flag = true
          } else {
            state.flag = false
          }
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            console.log(state.form.LicensePhoto, ' state.form.LicensePhoto')
            const { msg } = await EditLicenses(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        handleRemove,
        handleAvatarSuccess,
        handlePictureCardPreview,
        closeViewer,
      }
    },
  })
</script>
<style scoped>
  .avatar-uploader .avatar {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    display: block;
  }
</style>

<style>
  .el-dialog img {
    width: 100%;
    height: 100%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    border-radius: 100%;
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
  }
</style>
